<!-- 集中收货点 -->
<template>
	<view class="receive-point">
		<view class="head-tools-fixed">
			<view class="area-check">
				<image class="icon" src="../../static/loc-s.png" mode=""></image>
				<uniForms class="form">
					<formListItem
						class="item"
						placeholder="请选择区域"
						:read-only="true"
						:label-width="130"
						:type="'multiSelector'"
						:picker-list="areaPickerList"
						:arrow-show="true"
						:value.sync="addressData.area"
						@change="areaPickerChange"
						@pickerChange="pickerWorkChange"
					></formListItem>
				</uniForms>
			</view>
		</view>
		<container
			class="address-list-container"
			v-if="addressData.area.length > 0"
			:isFixed="false"
			:isNoData="isNoData"
			:isLoading="loading"
			@btnClick="getFocuseTakeAddressList"
			:nodataOption="{
				type: 'hasbtn',
				iconBottom: '40rpx',
				text: '无数据',
				btnText: '刷新'
			}"
		>
			<mescroll-body
				ref="mescrollRef"
				@init="mescrollInit"
				:down="{
					auto: false
				}"
				:up="{
					auto: false,
					textNoMore: '没有更多'
				}"
				@down="downLoad"
				@up="upLoad"
			>
				<view class="address-list">
					<address-item
						class="item"
						v-for="(item, index) in addressList"
						:is-act="actAddress == item.id"
						:key="item.id"
						:is-show-edit="false"
						:user-name="item.takeName"
						:phone="item.iphone"
						:address="item.address"
						@click="check(item)"
					></address-item>
				</view>
			</mescroll-body>
		</container>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import addressItem from '@/components/address-item/address-item.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
import container from '@/components/container/container.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		container,
		addressItem,
		uniForms,
		formListItem
	},
	data() {
		return {
			loading: false,
			pageNum: 1, //当前页码
			pageSize: 10, //每页数量
			total: null, //总数
			title: '', //标题
			actAddress: '', //当前选中地址
			addressList: [
				// 地址列表
				// {
				// 	addresAlias: null,
				// 	addresType: 2,
				// 	address: '西丽街道创客小镇23号楼502号',
				// 	city: '太原市',
				// 	county: '小店区',
				// 	createBy: '',
				// 	createTime: '2021-01-12 02:45:06',
				// 	fixIphone: null,
				// 	id: 21,
				// 	iphone: '213123123',
				// 	isDefault: 0,
				// 	params: {},
				// 	province: '山西省',
				// 	remark: null,
				// 	searchValue: null,
				// 	takeName: '张三',
				// 	updateBy: '',
				// 	updateTime: null,
				// 	userId: 1
				// }
			],

			areaPickerList: [
				// 区域选择级联数据
				// {
				// 	label: '选项1-1',
				// 	value: '1-1',
				// 	children: [
				// 		{
				// 			label: '选项1-1-1',
				// 			value: '1-1-1'
				// 		},
				// 		{
				// 			label: '选项1-1-2',
				// 			value: '1-1-2'
				// 		}
				// 	]
				// }
			],
			addressData: {
				area: [],
				city: '',
				county: '',
				province: ''
			}
		};
	},
	computed: {
		isNoData() {
			return this.addressList.length < 1;
		}
	},
	methods: {
		init() {
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量

			this.getAreaPickerList();
		},
		downLoad() {
			// 下拉刷新
			console.log('下拉刷新');
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			this.mescroll.resetUpScroll();
			this.getFocuseTakeAddressList()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		upLoad() {
			// 上拉加载
			console.log('上拉加载');

			this.pageNum++;
			this.getFocuseTakeAddressList()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		check(item) {
			// 编辑按钮点击

			this.actAddress = item;
			// this.$store.commit("setActAddress",this.actAddress)
			this.$store.commit('setFocusTakeAddress', this.actAddress);
			uni.navigateBack({
				delta: 1
			});
			console.log('编辑按钮点击');
		},
		getFocuseTakeAddressList() {
			// this.loading = true;
			return this.$store
				.dispatch('getFocuseTakeAddressList', {
					province: this.addressData.province,
					city: this.addressData.city,
					county: this.addressData.county,
					pageNum: this.pageNum, //页码
					pageSize: this.pageSize //每页数量
				})
				.then(res => {
					console.log('集中收货点列表', res);
					// this.loading = false;
					let data = res.data;
					this.total = data.total;
					if (this.pageNum == 1) this.addressList = data.rows;
					else this.addressList = [...this.addressList, ...data.rows];

					if (this.total != null && this.pageNum * this.pageSize < this.total) {
						console.log('加载');
						this.mescroll.endSuccess(data.rows.length, true);
					} else {
						console.log('不加载', data.rows.length);
						this.mescroll.endSuccess(data.rows.length, false);
					}
				})
				.catch(err => {
					this.mescroll.endErr();
					reject(err);
				});
		},
		areaPickerChange(data) {
			// 区域选择改变
			console.log('区域选择改变', data);
			this.addressData.province = data[0];
			this.addressData.city = data[1];
			this.addressData.county = data[2];
			if(this.mescroll&&this.mescroll.resetUpScroll)
			this.mescroll.resetUpScroll();
			this.pageNum = 1;
			this.pageSize = 10;
			this.loading = true;
			this.getFocuseTakeAddressList()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		pickerWorkChange(data) {
			// picker 交互值改变
			console.log('交互值改变', data);
			let province = data[0] || null;
			let city = data[1] || null;
			let county = data[2] || null;
			this.getAreaPickerList(province, city, county);
		},
		getAreaPickerList(province, city, county) {
			// 获取当前要用地区列表 （由于性能问题所以要分批加载）
			if (this.$store.state.addressModule.areaPickerList && this.$store.state.addressModule.areaPickerList.length > 0)
				this.areaPickerList = this.$store.state.addressModule.areaPickerList.map((provinceItem, provinceIndex) => {
					let result = {
						id: provinceItem.id,
						label: provinceItem.label,
						value: provinceItem.value,
						children: []
					};
					if ((province && provinceItem.value == province) || provinceIndex == 0)
						result.children = provinceItem.children.map((cityItem, cityIndex) => {
							if (city && cityItem.value == city) return cityItem;
							else if (cityIndex == 0) return cityItem;
							else
								return {
									id: cityItem.id,
									label: cityItem.label,
									value: cityItem.value,
									children: []
								};
						});

					return result;
				});
		}
	},
	onLoad() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.receive-point {
	.head-tools-fixed {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef MP */
		top: 0px;
		/* #endif */
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		z-index: 888;
		.area-check {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.icon {
				width: 30rpx;
				height: 40rpx;
			}
		}
		.form {
			width: 97%;
		}
	}
	.address-list-container {
		display: block;
		padding: 136rpx 20rpx 106rpx 20rpx;
	}
	.address-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		// padding: 136rpx 20rpx 106rpx 20rpx;
	}

	.item:nth-last-child(n + 2) {
		margin-bottom: 20rpx;
	}
}
</style>
